{% extends 'base.html' %}

{% block content %}
    <p class="mdui-typo-caption-opacity mdui-m-t-4">{{ BookList | length }} Books</p>
    {% if current_user.is_authenticated %}
    <form method="post">
    <div class="mdui-container-fluid mdui-p-l-0 mdui-m-b-2">
    <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-2 mdui-p-l-0 mdui-p-t-0">
        <label class="mdui-textfield-label" for="title">Title</label>
        <input class="mdui-textfield-input" type="text" name="title"  autocomplete="off" required>
    </div>
    <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-2  mdui-p-t-0">
        <label class="mdui-textfield-label" for="author">Author</label>
        <input class="mdui-textfield-input" type="text" name="author"  autocomplete="off" required></div>
    <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-2  mdui-p-t-0">
        <label class="mdui-textfield-label" for="author">&nbsp;</label>
    <input class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-col-xs-4" type="submit" name="submit" value="Add">
    </div>
    </div>
    </form>
    {% endif %}
    <ul class="book-list">
        {% for book in BookList %}
            <li>{{ book.title }} - {{ book.author }}
            {% if current_user.is_authenticated %}
                <span class="mdui-float-right">
                    <form method="post" action={{ url_for('book_delete', book_id=book.id) }}>
                <button class="btn-to-a" type="submit" name="delete" value="Delete" onclick="return confirm('确定删除？')">
                    <i class="mdui-icon material-icons">&#xe5cd;</i>
                </button>
                </form></span>
            <span class="mdui-float-right mdui-typo">
                <a style="display: inline;" href={{ url_for('book_edit', book_id=book.id) }}>EDIT</a>
            </span>
            {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endblock %}

